<template>
    <div class="research-materials-page">
      <el-container>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>标签管理</span>
                    <el-button class="button" text @click="addNewTag">新增标签</el-button>
                  </div>
                </template>
                <el-tag
                  v-for="tag in tags"
                  :key="tag"
                  class="mx-1"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>文献列表</span>
                    <el-input
                      v-model="search"
                      placeholder="搜索文献"
                      style="width: 200px"
                    />
                  </div>
                </template>
                <el-table :data="filteredLiterature" style="width: 100%">
                  <el-table-column prop="title" label="标题" width="300">
                    <template #default="scope">
                      <el-button link type="primary" @click="viewDetails(scope.row)">
                        {{ scope.row.title }}
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="authors" label="作者" width="200" />
                  <el-table-column prop="year" label="年份" width="100" />
                  <el-table-column prop="tags" label="标签" width="200">
                    <template #default="scope">
                      <el-tag
                        v-for="tag in scope.row.tags"
                        :key="tag"
                        class="mx-1"
                        size="small"
                      >
                        {{ tag }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button size="small" @click="editLiterature(scope.row)">编辑</el-button>
                      <el-button size="small" type="danger" @click="deleteLiterature(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>

      <el-dialog v-model="dialogVisible" :title="dialogTitle">
        <el-form :model="currentLiterature" label-width="120px">
          <el-form-item label="标题">
            <el-input v-model="currentLiterature.title" />
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="currentLiterature.authors" />
          </el-form-item>
          <el-form-item label="年份">
            <el-input v-model="currentLiterature.year" />
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="currentLiterature.tags" multiple placeholder="选择标签">
              <el-option
                v-for="tag in tags"
                :key="tag"
                :label="tag"
                :value="tag"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="摘要">
            <el-input v-model="currentLiterature.abstract" type="textarea" :rows="4" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveLiterature">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>

  <script setup>
  import { ref, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  // 假数据
  const tags = ref(['机器学习', '自然语言处理', '深度学习', '计算机视觉', '强化学习'])
  const literature = ref([
    { id: 1, title: '深度学习综述', authors: '李明，张华', year: 2020, tags: ['深度学习', '机器学习'], abstract: '这是一篇关于深度学习的综述文章...' },
    { id: 2, title: 'BERT: 预训练的深度双向 Transformers', authors: 'Devlin et al.', year: 2018, tags: ['自然语言处理', '深度学习'], abstract: 'BERT 是一种新的语言表示模型...' },
    { id: 3, title: '强化学习：简介', authors: '王刚', year: 2019, tags: ['强化学习', '机器学习'], abstract: '本文介绍了强化学习的基本概念和方法...' },
    { id: 4, title: '计算机视觉中的卷积神经网络', authors: '陈明，刘洋', year: 2021, tags: ['计算机视觉', '深度学习'], abstract: '卷积神经网络在计算机视觉任务中发挥着重要作用...' },
  ])

  const search = ref('')
  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const currentLiterature = ref({})

  const filteredLiterature = computed(() => {
    return literature.value.filter(item =>
      item.title.toLowerCase().includes(search.value.toLowerCase()) ||
      item.authors.toLowerCase().includes(search.value.toLowerCase()) ||
      item.tags.some(tag => tag.toLowerCase().includes(search.value.toLowerCase()))
    )
  })

  const addNewTag = () => {
    ElMessageBox.prompt('请输入新标签名称', '新增标签', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(({ value }) => {
      if (value && !tags.value.includes(value)) {
        tags.value.push(value)
        ElMessage({
          type: 'success',
          message: `新标签 "${value}" 已添加`,
        })
      }
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消添加标签',
      })
    })
  }

  const handleClose = (tag) => {
    tags.value.splice(tags.value.indexOf(tag), 1)
  }

  const viewDetails = (row) => {
    currentLiterature.value = { ...row }
    dialogTitle.value = '文献详情'
    dialogVisible.value = true
  }

  const editLiterature = (row) => {
    currentLiterature.value = { ...row }
    dialogTitle.value = '编辑文献'
    dialogVisible.value = true
  }

  const deleteLiterature = (row) => {
    ElMessageBox.confirm(
      '确定要删除这条文献记录吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      literature.value = literature.value.filter(item => item.id !== row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
  }

  const saveLiterature = () => {
    if (currentLiterature.value.id) {
      const index = literature.value.findIndex(item => item.id === currentLiterature.value.id)
      if (index !== -1) {
        literature.value[index] = { ...currentLiterature.value }
      }
    } else {
      currentLiterature.value.id = literature.value.length + 1
      literature.value.push({ ...currentLiterature.value })
    }
    dialogVisible.value = false
    ElMessage({
      type: 'success',
      message: '保存成功',
    })
  }
  </script>

  <style scoped>
  .research-materials-page {
    padding: 20px;
  }

  .el-main {
    color: #333;
    text-align: center;
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .button {
    padding: 0;
    min-height: auto;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  </style>